iT邦幫忙

2024 iThome 鐵人賽

DAY 9
0

Directus 的資料結構分為 Collection, Field, Item 幾種,接下來逐一操作建立這些資料的步驟。

首先要點選新建代表一組資料的 Collection ,要輸入 Name 作為這個資料組的名稱

https://res.cloudinary.com/dhcsjvhjg/image/upload/v1727090498/Screenshot_2024-09-23_at_7.21.30_PM_qpmsy9.png

  • Singleton 選項代表這個資料組只會有一筆資料,適合用來存放網站的全域設定,像是網站名稱,敘述等等。
  • 資料表鍵值可以選擇不同的類型,這裡選 UUID

Optional fields 提供一些常見的資料庫欄位選項,挺方便的,這裡先全選。

https://res.cloudinary.com/dhcsjvhjg/image/upload/v1727091095/Screenshot_2024-09-23_at_7.31.26_PM_gmodib.png

Collection 建好了,不過還只有剛剛的幾個預設欄位,要先編輯一下新增其他需要的欄位,

到 Settings → Data Model 找到剛剛新增的 Collection

https://res.cloudinary.com/dhcsjvhjg/image/upload/v1727091381/Screenshot_2024-09-23_at_7.36.11_PM_dv1itp.png

點進去後選 Create Field 就能新增想要的資料欄位,蠻多種類可以選的,各自有不同的編輯方式,甚至還能存地圖資料。

https://res.cloudinary.com/dhcsjvhjg/image/upload/v1727091417/Screenshot_2024-09-23_at_7.36.48_PM_vma7cl.png

新增了 title, slug, content 三個欄位,這裡的版面會對應到等一下的新增畫面,可以自由調整。

  • title 跟 slug 是基本的 Input ,content 選了 Mardown 編輯。

https://res.cloudinary.com/dhcsjvhjg/image/upload/v1727091779/Screenshot_2024-09-23_at_7.42.50_PM_uptpiy.png

到總覽畫面後選擇新增資料,就能看到剛剛配置的欄位編輯,Content 直接有編輯器可以用,挺方便的。

https://res.cloudinary.com/dhcsjvhjg/image/upload/v1727093946/Screenshot_2024-09-23_at_7.45.45_PM_nrcnyz.png

另外 slug 有選一個 slugify 選項,限制該欄位必須能作為網址的一部分使用,所以輸入空白的話會直接戴上橫線。

https://res.cloudinary.com/dhcsjvhjg/image/upload/v1727091785/Screenshot_2024-09-23_at_7.42.19_PM_u8bxro.png

再來試著從 API 讀出剛剛新增的資料,讀取的 url 如下。

{directus_server_url}/items/{collection}

如果剛剛建立的 collection 名稱是 posts 得話就是 http://127.0.0.1:8055/items/posts

這裡可以用跟開啟 Directus 後台的瀏覽器以外的瀏覽器試試看,會發現回報權限不足。
(用同一個瀏覽器的話貌似因為有 admin 權限所以不會被擋)

https://res.cloudinary.com/dhcsjvhjg/image/upload/v1727093443/Screenshot_2024-09-23_at_8.10.36_PM_zhanrt.png

Directus 預設 Collection 都是私有的,需要另外分配權限後才能做 CRUD,這邊先直接設定成 Public 開放操作。

到 Settings → Access Policies → 選預設建立的 Public。

在 Permissions 選項裡新增 posts ,並全開權限,然後右上打勾儲存。

https://res.cloudinary.com/dhcsjvhjg/image/upload/v1727093697/Screenshot_2024-09-23_at_8.13.39_PM_bbvxp3.png

再重試一次剛剛的 API 就能取得正確的資料了。

https://res.cloudinary.com/dhcsjvhjg/image/upload/v1727093744/Screenshot_2024-09-23_at_8.15.35_PM_i90j7l.png


上一篇
CMS - Directus
下一篇
Directus Javascript SDK
系列文
Awesome self hosted 30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言